import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getHotAlbumsAction } from "../store/actionCreators";

import ThemeHeaderNormal from "@/components/theme-header-normal";
import AlbumCover from "@/components/album-cover";
import { HotAlbumWrapper } from "./style";

const HotAlbum = memo(() => {
  const dispatch = useDispatch();
  const { hotAlbum } = useSelector(state => ({
    hotAlbum: state.getIn(["album", "hotAlbum"])
  }), shallowEqual);

  useEffect(() => {
    dispatch(getHotAlbumsAction());  
  }, [dispatch]);

  return (
    <HotAlbumWrapper>
      <ThemeHeaderNormal title="热门新碟" />

      {
        hotAlbum && <div className="hot-list">
          {
            hotAlbum.slice(0, 10).map(item => <AlbumCover key={item.id} item={item} />)
          }
        </div>
      }
    </HotAlbumWrapper>
  )
})

export default HotAlbum